<template>
  <transition :name="name">
    <div :key="docState" style="color: white;position: absolute">
      <span class="weather-report-text">{{ weatherMessage }}</span>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'WeatherReport',
  props: [
    'name',
    'list'
  ],
  data() {
    return {
      docState: 'weatherStatus1',
      showIndex: 0
    }
  },
  computed: {
    weatherMessage: function() {
      if (this.showIndex === 0) {
        return '今天天气晴'
      } else if (this.showIndex === 1) {
        return '明天天气雪'
      } else if (this.showIndex === 2) {
        return '后天天气雨'
      } else {
        return '天气失踪啦'
      }
    }
  },
  mounted() {
    var self = this
    setInterval(changeWeatherDate, 5000)
    function changeWeatherDate() {
      if (self.showIndex === 2) {
        self.showIndex = 0
      } else {
        self.showIndex++
      }
      if (self.showIndex === 0) {
        self.docState = 'weatherStatus1'
      } else if (self.showIndex === 1) {
        self.docState = 'weatherStatus2'
      } else if (self.showIndex === 2) {
        self.docState = 'weatherStatus3'
      }
    }
    changeWeatherDate()
  }
}
</script>

<style scoped>

 /* .myfade-enter-active, .myfade-leave-active {
    transition: all 5s;
  }
  .myfade-enter{
    opacity: 0;
  }
  .myfade-leave-to{
     opacity: 0;
     transform: translateY(-50px);
  }
*/

  .myfade-enter-active, .myfade-leave-active {
    transition: all 5s;
  }

  .myfade-enter{
    opacity: 1;
    transform: translateY(100%);
  }

  .myfade-leave-to{
    opacity: 1;
    transform: translateY(-100%);
  }

  .weather-report-text{
    transform: translate3d(0,0,0)
  }

</style>
